<template>
  <div class="noticeWork">
    <img v-if="showjsz" style="position:absolute;left:0px;top:0px;width:1920px;height: 1080px;"
         src="@/assets/images/jsz.png" alt="">
    <img class="bg" :src="$store.state.appBgInfo.default" alt="">
    <div ref="pagetitle" class="title">作业</div>
    <div class="sidebar">
      <VMultiList
        :groupDatas="groupDatas"
        ref="multi-list"
        @scrollFoc="scrollFoc"
        :head="{right:'1-0'}"
      >
        <div v-for="(item, index) in groupDatas.dataArr[0].data"
             :class="[{active1:groupDatas.focArr[0][index],active_hold: holdIndex == index},'sidebar_con']">
          {{item.name}}
        </div>
      </VMultiList>
    </div>

    <div class="noticeWork_con">
      <VScrollContainer ref="scrollContainer" @scroll="scroll">
        <VMultiList
          :groupDatas="groupData"
          ref="multi-list"
          @scrollFoc="scrollFoc"
          @scrollTo="scrollTo"
          :groupOffset="1"
          :head="{left:'0-0'}"
        >
          <div v-for="(item, index) in groupData.dataArr">
            <div class="title_con" v-if="item.data.length">
              {{item.data[0].more.date}}---------------------------------------------------------------------------------------------------------------------------------------------------------------
            </div>
            <div v-for="(item1, index1) in item.data" :class="[{active2: groupData.focArr[index][index1]},'nw_con']">
              {{item1.name}}
              <div class="nw_author"
                   :data-index="'tar_'+ (index + 1)+ '_'+index1"
                   v-if="item.data.length"
              >
                {{item1.base.createUserName +" "+item.data[0].more.date}}
              </div>
            </div>
          </div>
        </VMultiList>
      </VScrollContainer>
    </div>
  </div>
</template>

<script>
  import mixinCommon from "@/assets/js/mixin-common"

  export default {
    name: "noticeWork",
    mixins: [mixinCommon],
    data() {
      return {
        groupDatas: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              title: "",
              data: [
                {name: '作业', id: 38},
                {name: '通知', id: 39}
              ],
            }
          ],
          focArr: [[]]
        },
        groupData: {
          dataArr: [
            {
              maxLine: 1,
              dynamic: false,
              title: "",
              data: [],
            }
          ],
          focArr: [[]]
        },
        index: this.$route.query.index,
        holdIndex: -1,
        showjsz: false
      }
    },
    methods: {
      scrollFoc(obj) {
        if (obj.group === 0) {
          this.getData(obj.objindex)
          setTimeout(() => {
            // console.log(this.$refs);
            // 设置页面标题文字
            let name = this.groupDatas.dataArr[0].data[obj.objindex].name
            let type = name === '通知' ? 0 : 1
            let readNotice = this.$store.getters.user.readNotice
            let readZuoye = this.$store.getters.user.readZuoye
            this.$refs.pagetitle.innerHTML = name
            // this.wasuLog('/personal/' + type, name) // 埋点
            if ((!readNotice && obj.objindex === 1) || (!readZuoye && obj.objindex === 0)) {
              this.clear(type)
            }
          }, 10)
        }
      },
      getData(index) {
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/column/find?columnId=" + this.groupDatas.dataArr[0].data[index].id,
          data => {
            data = JSON.parse(data);
            //console.log(data);
            if (data.head.code === 1) {
              this.hs.ajax.get(
                "http://" +
                this.$store.state.domain +
                "/SMSCH-STB/material/list?columnId=" +
                data.body.id +
                // "&pageNum=1&pageSize=1" +
                "&schoolId=" + this.$store.state.school.id +
                "&gradeId=" + this.$store.state.user.clazz.grade.id +
                "&classId=" + this.$store.state.user.clazz.id +
                "&studentId=" + this.$store.state.user.id,
                data => {
                  data = JSON.parse(data);
                  console.log(data);
                  if (data.head.code === 1) {
                    if (data.body.length === 0) this.showjsz = true
                    // 初始化数据
                    this.groupData = {
                      dataArr: [
                        {
                          maxLine: 1,
                          dynamic: false,
                          title: "",
                          data: [],
                        }
                      ],
                      focArr: [[]]
                    }

                    data.body.forEach((item, index) => {
                      if (index === 0) {
                        this.groupData.dataArr[0].data.push(item)
                        return;
                      }
                      if (this.groupData.dataArr[this.groupData.dataArr.length - 1].data[0].more.date === item.more.date) {
                        this.groupData.dataArr[this.groupData.dataArr.length - 1].data.push(item)
                      } else {
                        this.groupData.dataArr.push({
                          maxLine: 1,
                          dynamic: false,
                          title: "",
                          data: [item],
                        })
                        this.groupData.focArr.push([])
                      }
                    })
                  } else {
                    this.showjsz = true
                  }
                }, 0, function (msg) {
                }, 3000);
            }
          },
          0,
          function (msg) {
          },
          3000
        );

      },
      clear(type) {  // 清除未读标记
        this.hs.ajax.get(
          "http://" +
          this.$store.state.domain +
          "/SMSCH-STB/notice/read" +
          "?type=" + type +
          "&studentId=" + this.$store.getters.user.id,
          data => {
            data = JSON.parse(data);
            console.log(data);
            if (data.head.code === 1) {

            }
          }, 0, function (msg) {
          }, 3000);
      }
    },
    created() {
      this.getData(this.index)
    },
    mounted() {
      this.hs.addBlurArea([0], (group, obj, objindex) => {
        this.holdIndex = objindex;
      });

      this.hs.initFocus("0-" + this.index);
      //  查看是否有记忆焦点
      if (this.hs.cookie.get(this.backObjName)) {
        let backObj = JSON.parse(this.hs.cookie.get(this.backObjName));
        let focArr = backObj.backFocArr;
        this.hs.cookie.delOne(this.backObjName);
        // console.log(JSON.stringify(focArr));
        this.hs.initFocus(focArr[0]);
      }
    }
  }
</script>

<style scoped lang="less">
  .noticeWork {
    width: 1920px;
    height: 1080px;
    .bg {
      position: absolute;
      left: 0px;
      top: 0px;
      z-index: -1;
    }
    .title {
      position: absolute;
      left: 1582px;
      top: 78px;
      width: 217px;
      height: 56px;
      line-height: 56px;
      font-size: 56px;
      text-align: center;
      color: #a8e7ff;
    }
    .sidebar {
      margin-left: 120px;
      margin-top: 184px;
      width: 178px;
      .sidebar_con {
        margin-bottom: 48px;
        width: 200px;
        height: 60px;
        background-color: #53ceff;
        border-radius: 30px;
        font-size: 42px;
        color: #104572;
        line-height: 60px;
        text-align: center;
      }

      .active_hold {
        background: #09508a;
        box-shadow: inset 2px 3px 7px 0px rgba(0, 0, 0, 0.35);
        color: #fbff92;
      }
      .active1 {
        border: 2px solid #ffffff;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        background-color: #0e60e9;
        color: #ffffff;
      }

    }

    .noticeWork_con {
      position: absolute;
      left: 334px;
      top: 185px;
      width: 1585px;
      height: 873px;
      .multi-container {
        padding-bottom: 180px;
        margin-left: 75px;
      }
      .title_con {
        width: 1392px;
        height: 22px;
        line-height: 22px;
        color: #daf5ff;
        margin-bottom: 10px;
        font-size: 22px;
        white-space: nowrap;
      }
      .nw_con {
        width: 1392px;
        /*height: 191px;*/
        background-color: #74c1e5;
        border-radius: 8px;
        margin-bottom: 48px;
        padding: 48px;
        font-size: 30px;
        line-height: 35px;
        .nw_author {
          text-align: right;
        }
      }
      .active2 {
        border: 2px solid #ffffff;
        border-radius: 8px;
        transform: scale(1.1);
        -webkit-transform: scale(1.1);
        color: #ffffff;
        background-color: #0e60e9;
      }
    }

    .active {
      border: 2px solid #ffffff;
      border-radius: 8px;
      transform: scale(1.1);
      -webkit-transform: scale(1.1);
    }

  }


</style>
